import React, { Component } from 'react';
import { View, Platform, Dimensions, Text, Image, TouchableOpacity, ListView, Alert } from 'react-native';
import api from '../../../../utils/api';
import { ScrollView } from 'react-native-gesture-handler';
import { SwipeListView } from 'react-native-swipe-list-view';
import moment from 'moment';

const window = Dimensions.get("window");
export default class Card extends Component {

    static navigationOptions = () => {
        return {
            title: "题卡",
            tabBarOnPress: (sceen) => {
                const { defaultHandler, navigation } = sceen;
                const onTabBarPress = navigation.getParam("onTabBarPress", () => { });
                if (onTabBarPress) {
                    onTabBarPress();
                }
                defaultHandler();
            }
        }
    }

    ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });


    setTitleNavigation = () => {
        const titleNavigation = this.props.screenProps.navigation;
        titleNavigation.setParams({
            "titleOptions": {
                title: "答题卡"
            }
        });

    }

    state = {
        showSelectItems: false,
        selectItem: {
            title: "全部",
            value: "0"
        },
        timeOrder: 0,
        gradeOrder: 0,
        select: "time",
        list: []
    }


    loadDataList = () => {
        setTimeout(() => {
            const { gradeOrder, timeOrder, selectItem, select } = this.state;

            const data = {};

            if (select == "time") {
                data.timeOrder = timeOrder,
                    data.partition = selectItem.value
            } else {
                data.gradeOrder = gradeOrder,
                    data.partition = selectItem.value
            }

            api({
                url: "/examRecord/getList",
                method: "POST",
                body: {
                    ...data
                }
            }).then(data => {
                console.log(data);
                this.setState({
                    list: data.result
                })
            })
        }, 1)
    }

    /**
   * 删除任务
   */
    onRemoveTaskClick = (data, i, rowId) => {
        const { list } = this.state;
        Alert.alert("提示", "确认删除这个答题卡?", [
            { text: "取消" },
            {
                text: "确定", onPress: () => {
                    list[i].examRecordVos.splice(rowId, 1);
                    this.setState({
                        list: list
                    });
                    api({
                        url: `/examRecord/delete?userAnswerCardId=${data.userAnswerCardId}`,
                        method: "POST"
                    }).then(data => {
                        // this.loadDataList();
                        // this.loadTaskList(selectDate);
                        // this.getTaskCalendar();
                    })


                }
            },

        ], { cancelable: true })

    }

    componentDidMount() {


        const navigation = this.props.navigation;
        navigation.setParams({
            onTabBarPress: () => {
                this.setTitleNavigation();
                this.loadDataList();
            }
        })
        this.setTitleNavigation();
        this.loadDataList();



    }

    render() {
        const { showSelectItems, selectItem, timeOrder, gradeOrder, list, select } = this.state;
        const items = [
            {
                title: "全部",
                value: "0"
            },
            {
                title: "听力",
                value: "1"
            },
            {
                title: "阅读",
                value: "2"
            }
        ]
        const selectItems = showSelectItems ? (
            <View style={{
                position: "absolute",
                backgroundColor: "#fff",
                right: 35,
                top: 40,
                width: (window.width - 70) * 0.333

            }}>
                {
                    items.map((item) => {
                        return (
                            <TouchableOpacity
                                key={item.value}
                                style={{
                                    alignItems: "center",
                                    justifyContent: "center",
                                    height: 35,
                                    borderBottomColor: "#E6E6E6",
                                    borderBottomWidth: 0.5
                                }}
                                onPress={() => {
                                    this.setState({
                                        showSelectItems: false,
                                        selectItem: item
                                    });
                                    this.loadDataList();
                                }}
                            >
                                <Text style={{
                                    fontSize: 14,
                                    color: "#1E1F44"
                                }}>{item.title}</Text>
                            </TouchableOpacity>
                        )
                    })
                }

            </View>
        ) : null;

        return (
            <View style={{
                position: "relative",
                flex: 1,
                backgroundColor: "#f6f6f6"
            }}>
                <View style={{
                    height: 40,
                    backgroundColor: "#fff",
                    paddingLeft: 35,
                    paddingRight: 35,
                    flexDirection: "row",
                    borderBottomColor: "#E6E6E6",
                    borderBottomWidth: 0.5
                }}>
                    <TouchableOpacity
                        style={{
                            width: "33.333%",
                            height: 40,
                            alignContent: "center"

                        }}
                        onPress={() => {
                            this.setState({
                                timeOrder: timeOrder == 0 ? 1 : 0,
                                select: "time"
                            });
                            this.loadDataList();
                        }}
                    >
                        <View style={{
                            height: 20,
                            borderLeftWidth: 1,
                            borderLeftColor: "#E6E6E6",
                            flexDirection: "row"
                        }}>
                            <View style={{
                                width: "50%",
                                paddingLeft: 10,
                                justifyContent: "center",
                                opacity: select == "time" ? 0.5 : 1

                            }}>
                                <Text style={{
                                    fontSize: 14,
                                    color: "#1E1F44",


                                }}>时间</Text>
                            </View>

                            <View style={{
                                width: "50%",
                                alignItems: "flex-end",
                                paddingRight: 10,
                                height: 20,
                                // backgroundColor:"#ccc",
                                justifyContent: "center"

                            }}>
                                {
                                    select == "time" ? (
                                        (timeOrder == 0) ? (
                                            <Image source={require("./img/a-1.png")} style={{
                                                width: 5,
                                                height: 15,

                                            }}></Image>
                                        ) : (
                                                <Image source={require("./img/a-2.png")} style={{
                                                    width: 5,
                                                    height: 15,

                                                }}></Image>
                                            )
                                    ) : null

                                }

                            </View>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{
                            width: "33.333%"
                        }}
                        onPress={() => {
                            this.setState({
                                gradeOrder: gradeOrder == 0 ? 1 : 0,
                                select: "grade"
                            });
                            this.loadDataList();
                        }}
                    >
                        <View style={{
                            height: 20,
                            borderLeftWidth: 1,
                            borderLeftColor: "#E6E6E6",
                            flexDirection: "row"
                        }}>
                            <View style={{
                                width: "50%",
                                paddingLeft: 10,
                                justifyContent: "center",
                                opacity: select == "grade" ? 0.5 : 1

                            }}>
                                <Text style={{
                                    fontSize: 14,
                                    color: "#1E1F44",

                                }}>分数</Text>
                            </View>

                            <View style={{
                                width: "50%",
                                alignItems: "flex-end",
                                paddingRight: 10,
                                height: 20,
                                // backgroundColor:"#ccc",
                                justifyContent: "center"

                            }}>
                                {
                                    select == "grade" ? (
                                        (gradeOrder == 0) ? (
                                            <Image source={require("./img/a-1.png")} style={{
                                                width: 5,
                                                height: 15,

                                            }}></Image>
                                        ) : (
                                                <Image source={require("./img/a-2.png")} style={{
                                                    width: 5,
                                                    height: 15,

                                                }}></Image>
                                            )
                                    ) : null

                                }

                            </View>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress={() => {
                            this.setState({
                                showSelectItems: !showSelectItems
                            })
                        }}
                        style={{
                            width: "33.333%"
                        }}
                    >
                        <View style={{
                            height: 20,
                            borderLeftWidth: 1,
                            borderLeftColor: "#E6E6E6",
                            flexDirection: "row",
                            borderRightWidth: 1,
                            borderRightColor: "#E6E6E6",
                        }}>
                            <View style={{
                                width: "50%",
                                paddingLeft: 10,
                                justifyContent: "center"

                            }}>
                                <Text style={{
                                    fontSize: 14,
                                    color: "#1E1F44",

                                }}>{selectItem.title}</Text>
                            </View>

                            <View style={{
                                width: "50%",
                                alignItems: "flex-end",
                                paddingRight: 10,
                                height: 20,
                                // backgroundColor:"#ccc",
                                justifyContent: "center"

                            }}>
                                {
                                    selectItems ? (
                                        <Image source={require("./img/a-up.png")} style={{
                                            width: 15,
                                            height: 15,

                                        }}></Image>
                                    ) : (
                                            <Image source={require("./img/a-down.png")} style={{
                                                width: 15,
                                                height: 15,

                                            }}></Image>
                                        )
                                }

                            </View>
                        </View>
                    </TouchableOpacity>
                </View>
                <ScrollView style={{

                }}>
                    <View
                        style={{
                            marginBottom: 60
                        }}
                    >
                        {
                            list.map((item, index) => {
                                return (
                                    <View
                                        key={index}
                                        style={{
                                            padding: 10
                                        }}
                                    >
                                        <View
                                            style={{
                                                flexDirection: "row",
                                                // justifyContent:"center",
                                                height: 20,
                                                alignItems: "center",
                                                marginBottom: 10
                                            }}
                                        >
                                            <View
                                                style={{
                                                    width: 4,
                                                    height: 15,
                                                    borderRadius: 2,
                                                    backgroundColor: "#00B7A5"
                                                }}
                                            >

                                            </View>
                                            <Text
                                                style={{
                                                    color: "#697388",
                                                    fontSize: 14,
                                                    marginLeft: 10
                                                }}
                                            >
                                                {item.exmaDate}
                                            </Text>
                                        </View>

                                        <SwipeListView
                                            dataSource={this.ds.cloneWithRows(item.examRecordVos)}

                                            renderRow={vo => {
                                                return (
                                                    <TouchableOpacity
                                                        key={vo.userAnswerCardId}
                                                        style={{
                                                            height: 64,
                                                            backgroundColor: "#fff",
                                                            borderRadius: 6,
                                                            marginBottom: 5,
                                                            flexDirection: "row",
                                                            alignItems: "center",
                                                            position: "relative"
                                                        }}
                                                        activeOpacity={1}
                                                        onPress={() => {
                                                            const navigation = this.props.screenProps.navigation;
                                                            navigation.navigate("/card/detail", {
                                                                data: {
                                                                    ...vo
                                                                },
                                                                back: () => {
                                                                    this.loadDataList();
                                                                }
                                                            });
                                                        }}

                                                    >
                                                        <View
                                                            style={{
                                                                width: 60,
                                                                height: 40,
                                                                alignItems: "center",
                                                                justifyContent: "center",
                                                                borderRightWidth: 0.5,
                                                                borderRightColor: "#e6e6e6"
                                                            }}
                                                        >
                                                            <Text
                                                                style={{
                                                                    fontSize: 24,
                                                                    color: "#00B7A5"
                                                                }}
                                                            >{vo.score}</Text>

                                                        </View>
                                                        <View
                                                            style={{
                                                                height: 64
                                                            }}
                                                        >
                                                            <View style={{
                                                                paddingLeft: 10
                                                            }}>
                                                                <View
                                                                    style={{
                                                                        height: 32,
                                                                        alignItems: "center",
                                                                        flexDirection: "row"
                                                                    }}
                                                                >
                                                                    <Text style={{
                                                                        fontSize: 16,
                                                                        color: "#1e1f44",
                                                                        marginTop: 5
                                                                    }}>{vo.cardTitle}</Text>
                                                                </View>
                                                                <View
                                                                    style={{

                                                                        height: 30,
                                                                        flexDirection: "row",
                                                                        alignItems: "center",
                                                                    }}
                                                                >
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14
                                                                    }}>共错：{vo.errorCount}</Text>
                                                                    <Image
                                                                        source={require("./img/start.png")}
                                                                        style={{
                                                                            width: 15,
                                                                            height: 15,
                                                                            marginLeft: 10
                                                                        }}
                                                                    ></Image>
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14,
                                                                        marginLeft: 10
                                                                    }}>
                                                                        {vo.pointCount}
                                                                    </Text>
                                                                    <Image
                                                                        source={require("./img/info.png")}
                                                                        style={{
                                                                            width: 15,
                                                                            height: 15,
                                                                            marginLeft: 10
                                                                        }}
                                                                    ></Image>
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14,
                                                                        marginLeft: 10
                                                                    }}>
                                                                        {vo.noteCount}
                                                                    </Text>
                                                                </View>
                                                            </View>
                                                        </View>
                                                        <View style={{
                                                            position: "absolute",
                                                            right: 10,
                                                            bottom: 10
                                                        }}>
                                                            <Text style={{ fontSize: 12, color: "#969EB0" }}>{moment(vo.createDate).format("YYYY/MM/DD")}</Text>
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            }}


                                            renderHiddenRow={(data, secId, rowId, rowMap) => {
                                                const rowKey = `${secId}${rowId}`;

                                                return (
                                                    <View style={{
                                                        alignItems: 'center',
                                                        backgroundColor: "#fff",
                                                        // flex: 1,
                                                        flexDirection: 'row',
                                                        height: 64,
                                                        // marginBottom:10,
                                                        borderRadius: 6,
                                                    }}>
                                                        <TouchableOpacity style={{
                                                            alignItems: "flex-end",
                                                            bottom: 0,
                                                            justifyContent: 'center',
                                                            position: 'absolute',
                                                            top: 0,
                                                            width: window.width / 2,
                                                            height: 64,
                                                            borderBottomRightRadius: 6,
                                                            borderTopRightRadius: 6,
                                                            backgroundColor: "#FF5A6F",
                                                            backgroundColor: "#FF5A6F",
                                                            right: 0
                                                        }} onPress={() => {
                                                            const row = rowMap[rowKey];
                                                            if (row) {
                                                                row.closeRow();
                                                            }
                                                            this.onRemoveTaskClick(data, index, rowId)



                                                        }}>
                                                            <Image source={require("../task/img/delete.png")} style={{ width: 20, height: 20, marginRight: 18 }}></Image>
                                                        </TouchableOpacity>
                                                    </View>
                                                );
                                            }}
                                            rightOpenValue={-55}
                                            disableRightSwipe={true}

                                        />


                                        {/* {
                                            item.examRecordVos.map((vo, j) => {
                                                return (
                                                    <TouchableOpacity
                                                        key={j}
                                                        style={{
                                                            height: 64,
                                                            backgroundColor: "#fff",
                                                            borderRadius: 6,
                                                            marginBottom: 5,
                                                            flexDirection: "row",
                                                            alignItems: "center",
                                                            position:"relative"
                                                        }}
                                                        onPress={()=>{
                                                            const navigation = this.props.screenProps.navigation;
                                                            navigation.navigate("/card/detail", {
                                                                data:{
                                                                    ...vo
                                                                },
                                                                back:()=>{
                                                                    this.loadDataList();
                                                                }
                                                            });
                                                        }}

                                                    >
                                                        <View
                                                            style={{
                                                                width: 60,
                                                                height: 40,
                                                                alignItems: "center",
                                                                justifyContent: "center",
                                                                borderRightWidth: 0.5,
                                                                borderRightColor: "#e6e6e6"
                                                            }}
                                                        >
                                                            <Text
                                                                style={{
                                                                    fontSize: 24,
                                                                    color: "#00B7A5"
                                                                }}
                                                            >{vo.score}</Text>

                                                        </View>
                                                        <View
                                                            style={{
                                                                height: 64
                                                            }}
                                                        >
                                                            <View style={{
                                                                paddingLeft: 10
                                                            }}>
                                                                <View
                                                                    style={{
                                                                        height: 32,
                                                                        alignItems: "center",
                                                                        flexDirection: "row"
                                                                    }}
                                                                >
                                                                    <Text style={{
                                                                        fontSize: 16,
                                                                        color: "#1e1f44",
                                                                        marginTop:5
                                                                    }}>{vo.cardTitle}</Text>
                                                                </View>
                                                                <View
                                                                    style={{

                                                                        height: 30,
                                                                        flexDirection: "row",
                                                                        alignItems: "center",
                                                                    }}
                                                                >
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14
                                                                    }}>共错：{vo.errorCount}</Text>
                                                                    <Image
                                                                        source={require("./img/start.png")}
                                                                        style={{
                                                                            width: 15,
                                                                            height: 15,
                                                                            marginLeft: 10
                                                                        }}
                                                                    ></Image>
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14,
                                                                        marginLeft: 10
                                                                    }}>
                                                                        {vo.pointCount}
                                                                    </Text>
                                                                    <Image
                                                                        source={require("./img/info.png")}
                                                                        style={{
                                                                            width: 15,
                                                                            height: 15,
                                                                            marginLeft: 10
                                                                        }}
                                                                    ></Image>
                                                                    <Text style={{
                                                                        color: "#697388",
                                                                        fontSize: 14,
                                                                        marginLeft: 10
                                                                    }}>
                                                                        {vo.noteCount}
                                                                    </Text>
                                                                </View>
                                                            </View>
                                                        </View>
                                                        <View style={{
                                                            position:"absolute",
                                                            right:10,
                                                            bottom:10
                                                        }}>
                                                             <Text style={{fontSize:12,color:"#969EB0"}}>{moment(vo.createDate).format("YYYY/MM/DD")}</Text>       
                                                        </View>
                                                    </TouchableOpacity>
                                                )
                                            })
                                        } */}
                                    </View>
                                )
                            })
                        }
                    </View>

                </ScrollView>
                {/* <View> </View> */}
                {selectItems}
                <TouchableOpacity
                    onPress={() => {
                        const navigation = this.props.screenProps.navigation;
                        navigation.navigate("/card/detail", {
                            back: () => {
                                this.loadDataList();
                            }
                        });
                    }}
                    style={{
                        position: "absolute",
                        width: 120,
                        height: 55,
                        backgroundColor: "#fff",
                        elevation: 2,
                        shadowColor: "#000",
                        borderRadius: 6,
                        shadowOffset: {
                            shadowOffsetX: 2
                        },
                        shadowOpacity: 0.5,
                        shadowRadius: 2,
                        bottom: 10,
                        right: 10,
                        alignItems: "center",
                        justifyContent: "center",
                        flexDirection: "row"
                    }}>
                    <Image source={require("./img/hand.png")} style={{
                        width: 18,
                        height: 18
                    }}></Image>
                    <Text style={{
                        fontSize: 16,
                        color: "#1E1F44",
                        marginLeft: 5
                    }}>对答案</Text>
                </TouchableOpacity>
            </View>
        )
    }
}